<template>
  <div>
    <div class="message-container">
      <el-menu
        default-active="1"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="1">回复我的</el-menu-item>
        <el-menu-item index="2">@我的</el-menu-item>
        <el-menu-item index="3">收到的赞</el-menu-item>
        <el-menu-item index="4">系统通知</el-menu-item>
        <el-menu-item index="4">消息设置</el-menu-item>
      </el-menu>
      <div class="message-content">
        <message-box></message-box>
        <message-box></message-box>
      </div>
    </div>
  </div>
</template>
<script>
import MessageBox from "@/components/message/MessageBox.vue";
import Head from '@/components/common/Head.vue';
export default {
  components: {
    MessageBox,
    Head,
  },
  name: "Message",
};
</script>
<style>
.message-container {
  background-color: white;
  margin: 50px;
}

.message-content {
  padding: 24px 16px;
  background-color: rgba(197, 197, 197, 0.54);
  margin-bottom: 10px;
  border-radius: 4px;
}
</style>